import { ExtractPropTypes, PropType } from "vue"
import { validatorColorValue } from '../../utils'
import { ZIndex } from '../../config'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * pickerMode有效值
 */
export const PickerModes = ['time', 'region'] as const
export type PickerMode = typeof PickerModes[number]

/**
 * time模式配置参数类型
 */
export type PickerTimeOptions = {
  /** 显示年 */
  year?: boolean,
  /** 显示月 */
  month?: boolean,
  /** 显示日 */
  day?: boolean,
  /** 显示时 */
  hour?: boolean,
  /** 显示分 */
  minute?: boolean,
  /** 显示秒 */
  second?: boolean,
  /** 显示单位 */
  unit?: boolean,
  /** 开始年份 */
  startYear?: number,
  /** 结束年份 */
  endYear?: number,
  /** 结果返回时间戳 */
  timestamp?: boolean
}

/**
 * region模式配置参数类型
 */
export type PickerRegionOptions = {
  /** 显示省 */
  province?: boolean,
  /** 显示市 */
  city?: boolean,
  /** 显示区 */
  area?: boolean
}

/**
 * picker返回结果类型
 */
export type PickerTimeResult = {
  /** 年 */
  year?: number,
  /** 月 */
  month?: number,
  /** 日 */
  day?: number,
  /** 时 */
  hour?: number,
  /** 分 */
  minute?: number,
  /** 秒 */
  second?: number,
  /** 时间戳 */
  timestamp?: number
}
export type PickerRegionResultData = {
  label: string,
  value: string
}
export type PickerRegionResult = {
  /** 省 */
  province?: PickerRegionResultData,
  /** 市 */
  city?: PickerRegionResultData,
  /** 区 */
  area?: PickerRegionResultData
}

/**
 * props参数
 */
export const pickerProps = {
  /** modelValue, 控制picker的显示/隐藏 */
  modelValue: {
    type: Boolean,
    default: false
  },
  /** 默认值
   * mode为time时支持 2021-09-01 || 2021-09-01 13:00:23 || 2021/09/01 || 2021/09/01 13:00:23
   * mode为region时支持 ["11", "1101", "110101"] || ["广东省", "广州市", "天河区"]
   */
  defaultValue: {
    type: [String, Array],
    default: ''
  },
  /** picker模式 */
  mode: {
    type: String,
    default: (): PickerMode => {
      return 'time'
    },
    validator: (value: PickerMode) => {
      return PickerModes.includes(value)
    }
  },
  /** 时间配置, 在mode为time时有效 */
  timeOption: {
    type: Object,
    default: (): PickerTimeOptions => {
      return {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
        unit: true,
        timestamp: true
      }
    }
  },
  /** 地区配置, 在mode为region时有效 */
  regionOption: {
    type: Object,
    default: (): PickerRegionOptions => {
      return {
        province: true,
        city: true,
        area: true
      }
    }
  },
  /** 取消按钮文本 */
  cancelText: {
    type: String,
    default: '取消'
  },
  /** 取消按钮文本颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  cancelColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 确认按钮文本 */
  confirmText: {
    type: String,
    default: '确认'
  },
  /** 确认按钮文本颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  confirmColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 显示遮罩 */
  mask: {
    type: Boolean,
    default: true
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ZIndex.popup
  }
}
export type PickerProps = ExtractPropTypes<typeof pickerProps>

export const pickerEmits = {
  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',
  cancel: () => true,
  confirm: (value: PickerTimeResult | PickerRegionResult) => true
}
export type PickerEmits = typeof pickerEmits
